<template>
	<view class="cont" :style="theme">
		<view class="student" v-for="(item, index) in list" :key="index">
			<view class="flex-cb">
				<image :src="imgHost+'/user.png'" class="student-l"></image>
				<view class="student-cnt">
					<view>{{item.studentName}}</view>
					<view>{{item.phone}}</view>
				</view>
			</view>
			<view style="padding-left: 90rpx;margin-top: 20rpx;">
				<textarea class="py" type="text" placeholder="请输入评语" v-model="item.content" maxlength="200" />
				<u-upload width="50" height="50" multiple :maxCount="5" :name="index" :fileList="item.showList"
					@afterRead="afterRead" @delete="deletePic" />
			</view>
		</view>
		
		<view class="bottomState">
			<view @click="$noMultipleClicks(submit)" class="registerNow">提交</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				noClick: true,
				timeId: '',
				pwd: '',
				deletable: true
			}
		},
		onLoad(ops) {
			this.timeId = ops.timeId
			this.getDetail()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			deletePic(event) {
				let sindex = event.name
				let index = event.index
				let list = [...this.list]
				const imageAllList = list[sindex].imageAllList;
				const imageList = list[sindex].imageList;
				const showList = list[sindex].showList;
				imageAllList.splice(index, 1)
				showList.splice(index, 1)
				imageList.splice(index, 1)
				list[sindex].imageAllList = imageAllList
				list[sindex].imageList = imageList
				list[sindex].showList = showList
				this.list = list
			},
			submit() {
				let list = [...this.list]
				this.$app.ajax({
					data: {
						param: {
							memberId: this.userInfo.id,
							venueId: this.venueId,
							timeId: this.timeId,
							list
						}
					},
					api: this.$api.coursePerformanceUp()
				}).then((res) => {
					if (res.errorCode == '000000') {
						this.$app.showToast('提交成功')
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						}, 1000)
					}
				}).catch(() => {})
			},
			// 新增图片
			afterRead(event) {
				let sindex = event.name
				const file = event.file;
				let url = this.$app.baseUrls
				let that = this
				for (let i = 0; i < file.length; i++) {
					uni.uploadFile({
						url: this.$app.baseUrls,
						filePath: file[i].url,
						header: {
							'content-type': 'application/json', // 默认值
							Cookie: uni.getStorageSync('cookie'),
							gymId: that.venueId
						},
						name: 'file',
						formData: {
							folder: 'COURSE_IMG',
							type: ''
						},
						success(res) {
							// 上传完成需要更新 fileList
							let list = [...that.list]
							const imageAllList = list[sindex].imageAllList;
							const imageList = list[sindex].imageList;
							const showList = list[sindex].showList;
							imageAllList.push(JSON.parse(res.data).showUrl)
							imageList.push(JSON.parse(res.data).insertUrl)
							showList.push({url: JSON.parse(res.data).showUrl,})
							list[sindex].imageAllList = imageAllList
							list[sindex].imageList = imageList
							list[sindex].showList = showList
							that.list = list
						},
					});
				}
			},

			getDetail() {
				this.$app.ajax({
					api: this.$api.coursePerformance(),
					data: {
						param: {
							memberId: this.userInfo.id,
							venueId: this.venueId,
							timeId: this.timeId
						}
					}
				}).then((res) => {
					if (res.errorCode === '000000') {
						let list = res.recordList
						list.forEach(e => {
							e.imageAllList = e.imageAllList || []
							e.imageList = e.imageList || []
							e.showList = []
							e.imageAllList.forEach(s=> {
								e.showList.push({
									url: s
								})
							})
						});
						this.list = list
					}
				}).catch(() => {})
			}
		}

	}
</script>
<style scoped lang="scss">
	.cont {
		box-sizing: border-box;
		padding-bottom: 120rpx;
	}

	.student {
		border-bottom: 1px solid #E5E5E5;
		padding: 30rpx 0;
		width: 690rpx;
		margin: 0 auto;
		box-sizing: border-box;
		margin: 0 auto;
	}

	.student-l {
		width: 70rpx;
		height: 72rpx;
		margin-right: 20rpx;
	}

	.student-r {
		width: 48rpx;
		height: 48rpx;
	}

	.student-cnt {
		flex: 1;
		color: #222222;
		font-size: 30rpx;
		line-height: 1.5;
	}

	.student-cnt view:nth-of-type(2) {
		color: #999999;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.bottomState {
		width: 100%;
		padding: 16rpx 30rpx;
		background-color: #fff;
		z-index: 9999999;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.registerNow {
		height: 88rpx;
		text-align: center;
		color: #fff;
		background-color: $color;
		font-size: 30rpx;
		border-radius: 10rpx;
		line-height: 88rpx;
	}

	.py {
		padding: 20rpx;
		box-sizing: border-box;
		height: 180rpx;
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		background: $bjColor;
		border-radius: 8rpx;
		border: 1px solid #E5E5E5;
	}
</style>
